<template>
    <ProTable
        ref="tableRef"
        :list="list"
        :columns="columns"
        :api="global.$api.MockGetTableList"
        :row-key="rowKey"
        showAdd
    />
</template>
<script setup>
import { ref, inject, onMounted, h, computed } from "vue";
import ProTable from "@/common/ProTable/index.vue";
import Filter from "@/common/ProTable/Filter.vue";
import SortIcon from "@/common/ProTable/SortIcon.vue";

const global = inject("global");

const tableRef = ref(null);
const list = [
    {
        component: "NInput",
        key: "name",
        label: "姓名",
        defaultVal: "",
        props: {
            clearable: true,
        },
    },
    {
        component: "NSelect",
        key: "gender",
        label: "性别",
        props: {
            clearable: true,
            options: [
                { value: 1, label: "男" },
                { value: 0, label: "女" },
            ],
        },
    },
    {
        component: "NSelect",
        key: "class",
        label: "班级",
        props: {
            clearable: true,
            placeholder: "请选择班级",
            options: [],
        },
    },
];

const titleList = ref(["sfzh", "date", "city"]);
const descSort = ref("");
const columns = computed(() => {
    let options = [
        { value: "sfzh", label: "身份证号", disabled: true },
        { value: "date", label: "出生日期" },
        { value: "city", label: "城市" },
    ];
    let defaultList = ["name", "desc"];
    let list = [
        { type: "selection" },
        { title: "姓名", key: "name", align: "center", width: 140 },
        {
            title: "身份证号",
            key: "sfzh",
            align: "center",
            width: 230,
            sorter: () => {},
            renderSorterIcon: () => {
                return h(SortIcon, {
                    sort: descSort.value,
                    onOrder: (str) => (descSort.value = str),
                });
            },
        },
        {
            title: "出生日期",
            key: "date",
            align: "center",
            width: 140,
        },
        {
            title: "城市",
            key: "city",
            align: "center",
            width: 140,
        },
        {
            title: () => {
                return h(Filter, {
                    title: "描述",
                    options,
                    defaultVal: titleList.value,
                    onConfirm: (val) => (titleList.value = val),
                });
            },
            key: "desc",
            align: "center",
        },
    ];

    let _titleList = titleList.value.concat(defaultList);
    let _list = list.filter(
        (v) => _titleList.includes(v.key) || v.type === "selection"
    );
    return _list;
});

const rowKey = (row) => row.id;

onMounted(() => {
    tableRef.value.getData();
});
</script>
<style lang="less" scoped>
.tabs-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px;
    gap: 0 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    .item {
        text-align: center;
        flex: auto;
        line-height: 32px;
        cursor: pointer;
    }
    .bg-item {
        position: absolute;
        // height: 32px;
        background: fade(#fff, 10%);
        top: 2px;
        transition: all 0.2s ease-in-out;
    }
}
</style>
